<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 头部操作栏 -->
            <div class="layui-form lay-header">
                <div class="toolbar">
                    <div class="layui-form-item lay-query-content">
                        <div class="lay-query-box">
                            <div class="query-lt">
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">订单编号：</label>
                                    <div class="layui-input-inline mr0">
                                        <input name="sn" class="layui-input" type="text" placeholder="请输入订单编号"/>
                                    </div>
                                </div>
                            </div>
                            <div class="query-rt">
                                <div class="layui-inline">
                                    <button class="layui-btn icon-btn color-green" lay-filter="formSubSearchLog" lay-submit>查询</button>
                                    <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 表格 -->
            <table class="layui-table" id="productOrderTable" lay-filter="productOrderTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="productOrderTableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="view">详情</a>
    {{# if(d.status == "shipped"){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="confirmReceipt">确认收货</a>
    {{# } }}
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="productOrderForm">
    <form lay-filter="productOrderForm" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">创建者</label>
            <div class="layui-input-block">
                <input name="creator" placeholder="请输入创建者" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">修改者</label>
            <div class="layui-input-block">
                <input name="modifier" placeholder="请输入修改者" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">创建人</label>
            <div class="layui-input-block">
                <input name="creatorName" placeholder="请输入创建人" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">修改人</label>
            <div class="layui-input-block">
                <input name="modifierName" placeholder="请输入修改人" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单编号</label>
            <div class="layui-input-block">
                <input name="sn" placeholder="请输入订单编号" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品描述</label>
            <div class="layui-input-block">
                <input name="title" placeholder="请输入商品描述" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <select name="type">
                        <option value="purchase">采购</option>
                        <option value="lease">租凭</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <select name="status">
                        <option value="unpaid">未支付</option>
                        <option value="depositPaid">已付定金</option>
                        <option value="complete">支付完成</option>
                        <option value="closed">已关闭</option>
                        <option value="cancel">已取消</option>
                        <option value="refunding">定金退款中</option>
                        <option value="refunded">定金已退款</option>
                        <option value="refundAbnormal">定金退款异常</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">定金</label>
            <div class="layui-input-block">
                <input name="deposit" placeholder="请输入定金" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单金额</label>
            <div class="layui-input-block">
                <input name="amount" placeholder="请输入订单金额" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">支付定金二维码</label>
            <div class="layui-input-block">
                <input name="qrCode" placeholder="请输入支付定金二维码" type="text" class="layui-input" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="productOrderFormSubmit" lay-submit>保存</button>
        </div>
    </form>
</script>

<!-- 订单详情弹窗 -->
<script type="text/html" id="productOrderView">
    <!-- 正文开始 -->
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-tab" id="productOrderDetail">
                    <ul class="layui-tab-title">
                        <li class="layui-this" data-id="cabinet">订单柜子信息</li>
                        <li data-id="cutter">订单物料信息</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <!-- 订单刀柜信息表格 -->
                            <table class="layui-table" id="companyProductOrderCabinetDetailTable" lay-filter="companyProductOrderCabinetDetailTable"></table>
                        </div>
                        <div class="layui-tab-item">
                            <!-- 订单刀具信息表格 -->
                            <table class="layui-table" id="companyProductOrderCutterDetailTable" lay-filter="companyProductOrderCutterDetailTable"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

<!-- 订单详情弹窗 -->
<script type="text/html" id="picture">
    <div><img src="{{d.picture}}" style="height: 24px; cursor: pointer" onclick="previewImg(this)"></div>
</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var admin = layui.admin;
        var upload = layui.upload;

        // 渲染表格
        var insTb = table.render({
            elem: '#productOrderTable',
            url: config.base + 'enterprisecab/product/admin/productOrder/list',
            page: true,
            cellMinWidth: 100,
            cols: [[
                {type: 'checkbox'}
                ,{field: 'sn', sort: true, title: '订单编号'}
                ,{field: 'cabinetNum', sort: true, title: '柜体型号数'}
                ,{field: 'cabinetQuantity', sort: true, title: '柜体台数'}
                ,{field: 'amount', sort: true, title: '柜体总价'}
                ,{field: 'cutterNum', sort: true, title: '刀具型号数'}
                ,{field: 'typeDesc', sort: true, title: '订单类型'}
                ,{field: 'creatorName', sort: true, title: '下单人'}
                ,{field: 'createTime', sort: true, title: '下单时间'}
                ,{field: 'statusDesc', sort: true, title: '状态'}
                ,{align: 'center', toolbar: '#productOrderTableBar', title: '操作', width: 200}
            ]],
        });

        // 工具条点击事件
        table.on('tool(productOrderTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'view') { // 详情
                showViewModel(data);
            } else if (obj.event === 'confirmReceipt') { // 确认收货
                confirmReceipt(data);
            }
        });

        // 搜索
        form.on('submit(formSubSearchLog)', function (data) {
            insTb.reload({where: data.field,page: {curr: 1}},'data');
        });

        //监听排序
        table.on('sort(productOrderTable)', function(obj){
            table.reload('productOrderTable', {
                initSort: obj
                ,where: {
                    sort: obj.field
                    ,order: obj.type
                }
            });
        });

        // 添加按钮点击事件
        $('#productOrderBtnAdd').click(function () {
            showEditModel();
        });

        // 显示详情弹窗
        function showViewModel(data) {
            admin.open({
                type: 1,
                area: '80%',
                offset: '65px',
                title: '订单详情',
                content: $('#productOrderView').html(),
                success: function () {
                    // 渲染表格
                    table.render({
                        elem: '#companyProductOrderCabinetDetailTable',
                        url: config.base + 'enterprisecab/product/admin/productOrder/productOrderCabinetDetailList',
                        where: {productOrderId: data.id},
                        page: true,
                        cellMinWidth: 100,
                        cols: [[
                            {type: 'checkbox'}
                            ,{field: 'picture', sort: true, title: '柜子图片', templet: '#picture'}
                            ,{field: 'productTypeName', sort: true, title: '柜子类型'}
                            ,{field: 'skuSpecValueNames', sort: true, title: '柜子型号'}
                            ,{field: 'brandName', sort: true, title: '柜子品牌'}
                            ,{field: 'price', sort: true, title: '单价'}
                            ,{field: 'quantity', sort: true, title: '需求数量'}
                            ,{field: 'price', sort: true, title: '单位'}
                            ,{field: 'amount', sort: true, title: '总价'}
                        ]]
                    });

                    $("#productOrderDetail").find("ul li").each(function (index, item) {
                        $(item).click(function () {
                            if($(this).data("id") == "cabinet"){
                                // 渲染表格
                                table.render({
                                    elem: '#companyProductOrderCabinetDetailTable',
                                    url: config.base + 'enterprisecab/product/admin/productOrder/productOrderCabinetDetailList',
                                    where: {productOrderId: data.id},
                                    page: true,
                                    cellMinWidth: 100,
                                    cols: [[
                                        {type: 'checkbox'}
                                        ,{field: 'picture', sort: true, title: '柜子图片', templet: '#picture'}
                                        ,{field: 'productTypeName', sort: true, title: '柜子类型'}
                                        ,{field: 'skuSpecValueNames', sort: true, title: '柜子型号'}
                                        ,{field: 'brandName', sort: true, title: '柜子品牌'}
                                        ,{field: 'price', sort: true, title: '单价'}
                                        ,{field: 'quantity', sort: true, title: '需求数量'}
                                        ,{field: 'unitName', sort: true, title: '单位'}
                                        ,{field: 'amount', sort: true, title: '总价'}
                                    ]]
                                });
                            }else{
                                // 渲染表格
                                table.render({
                                    elem: '#companyProductOrderCutterDetailTable',
                                    url: config.base + 'enterprisecab/product/admin/productOrder/productOrderCutterDetailList',
                                    where: {productOrderId: data.id},
                                    page: true,
                                    cellMinWidth: 100,
                                    cols: [[
                                        {type: 'checkbox'}
                                        ,{field: 'picture', sort: true, title: '刀具图片', templet: '#picture'}
                                        ,{field: 'productName', sort: true, title: '刀具名称'}
                                        ,{field: 'productCode', sort: true, title: '系列编码'}
                                        ,{field: 'skuCode', sort: true, title: '物料编号'}
                                        ,{field: 'skuSpecValueNames', sort: true, title: '规格码'}
                                        ,{field: 'brandName', sort: true, title: '品牌'}
                                        ,{field: 'price', sort: true, title: '单价'}
                                        ,{field: 'unitName', sort: true, title: '单位'}
                                    ]]
                                });
                            }
                        })
                    })
                }
            });
        }

        // 确认收货
        function confirmReceipt(data) {
            layer.confirm('确定要收货吗？', {
                offset: '65px',
                skin: 'layui-layer-admin'
            }, function (i) {
                layer.close(i);
                layer.load(2);
                admin.req('enterprisecab/product/admin/productOrder/confirmReceipt', {id: data.id}, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload();
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'POST');
            });
        }

        // 导出excel
        $('#productOrderBtnExport').click(function () {
            var checkRows = table.checkStatus('productOrderTable');
            if (checkRows.data.length == 0) {
                layer.msg('请选择要导出的数据', {icon: 2});
            } else {
                table.exportFile(insTb.config.id, checkRows.data, 'xls');
            }
        });

    });
</script>